This solves a problem we've had for some time: Two right-floating images with too little text
between them cascade inwards into the middle of the page. Adding more text isn't a viable
solution because "too little text" is more and more text with increasing screen resolution. This
solves it elegantly, I think. Also, since the 'clear' is added only to the right-floating
elements, this does *not* push the text down and does *not* cause blocks of whitespace to occur.
/* images */
div.floatright {
+ clear: right;
float: right;
margin: 0;
- position:relative;
+ position: relative;
border: 0.5em solid White;
border-width: 0.5em 0 0.8em 1.4em;
}
-div.floatright p { font-style: italic;}
+div.floatright p { font-style: italic; }
div.floatleft {
+ clear: left;
float: left;
margin: 0.3em 0.5em 0.5em 0;
- position:relative;
+ position: relative;
border: 0.5em solid White;
border-width: 0.5em 1.4em 0.8em 0;
}